// 相机： 透视相机、正投影相机， dat.gui,js


import React, { Component } from 'react';
import * as THREE from 'three';    //引入three基础相关的所有模块
import { Scene } from 'three';
import Stats from 'three/examples/js/libs/stats.min.js';  //引入状态监测
import TWEEN from "@tweenjs/tween.js";
import * as dat from 'dat.gui';


 
class Three2 extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
  
    initThree = () => {   // 初始化，准备数据  四大组件：场景、相机、渲染器、几何体
        threeStart();

        var scene;
        function initScene() {    // 1、初始化 场景sence
            scene = new THREE.Scene();
        }

        var camera;
        function initCamera() {   // 2、初始化 相机camera
            //（正投影相机） new THREE.OrthographicCamera(left, right, top, bottom, near, far): 原点距 左右上下近远屏幕的距离
            camera = new THREE.OrthographicCamera(window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, 10, 1000);  

            //（透视相机） PerspectiveCamera( fov, aspect, near, far ): 视角的度数，显示范围的宽高比，最近的距离，最远看到的距离
            //camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);  

           /// 设置相机 的位置(position/up/lookat 三个方向确定了相机的唯一位置方向)
            camera.position.set(400,400,400)   // 400,400,400
            camera.up.set(0,1,0);  // 垂直于快门的一条线（相机上面）   (up与lookat两个方向一定是垂直的90度!!!!)
            camera.lookAt(0,0,0);  // 代表一个方向，而不是一个点，(垂直于镜头的一条线)
        }
 
 
        var renderer,width,height,stats;
        function initRender() {   // 3、初始化 渲染器render
            width = window.innerWidth;
            height = window.innerHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true   // 如果数据量非常大，设置为false为提高性能
            });
            renderer.setSize(width, height);   // 设置 渲染器的大小（页面大小）
            document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 将渲染器渲染的内容添加到窗口上（固定写法）
            renderer.setClearColor(0xFFFFFF, 1.0);  // 设置渲染器颜色（清除时）


            stats = new Stats();
            stats.domElement.style.position = "absolute";
            stats.domElement.style.left = "262px";
            stats.domElement.style.top = "0px";
            document.getElementById('canvas-frame').appendChild(stats.domElement);  // 将渲染器渲染的内容添加到窗口上（固定写法）
        }
 
        var mesh;
        function initObject() {   ///4、定义一个几何体，显示在页面上的物体

         //圆柱体：new THREE.CylinderGeometry(70, 100, 200)：上圆半径、下圆半径、高、半径分为多少段(插点，点越多越圆)
          var geometry = new THREE.CylinderGeometry(70, 100, 200, 30);  
          var material = new THREE.MeshLambertMaterial({ color: 0xFFFF00 });  // 材质：可定义颜色（2、必须）
          mesh = new THREE.Mesh(geometry, material);  // 几何体 和 材质 一起组成 网格模型（显示出来的物体都是网格模型）（3、必须）
          mesh.position.set(0, 0, 0);   // 网格模型的位置
          scene.add(mesh);  // 将网格模型添加到 场景中 进行显示（4、必须）

          var axisHelper = new THREE.AxisHelper(400);  // 添加一个坐标系，长度为400
          scene.add(axisHelper);
        } 
    
        var light;
        function initLight() {  // 初始化 灯光
            light = new THREE.AmbientLight(0xFFFFFF);
            light.position.set(300, 300, 0);
            scene.add(light);
        }
        
        function initTween() {  // 初始化tween,移动 相机/物体 位置
          new TWEEN.Tween(camera.position)  // 相机位置
            .to({x:1000},3000)     // 3秒内将相机位置x改变为400
            .repeat(Infinity)  // 重复：一直重复
            .start();   // 开始
        }

        var param;
        function createUI() {  // 创建UI界面:改变相机的参数:视角fov
            var ParamObj = function(){   // 默认视角为45度
                this.fov = 45 
            }  
            param = new ParamObj();  
            var gui = new dat.GUI();
            gui.add(param,"fov",0,180)  // 给gui添加控件： 参数为param，改变范围是0-180 
               .name("视角大小")  // 控件的文本
        }

        function setCameraFov(fov) {  // 创建UI界面:改变相机的参数:视角fov
            camera.fov = fov;  // 改变相机的视角fov
            camera.updateProjectionMatrix();  // 更新相机的投影矩阵，将更新后的fov应用到相机的内部，参与整个渲染
        }
        function changeFov() {  // 创建UI界面:改变相机的参数:视角fov
            //  console.log("lala",param.fov)    ???????????????????????????
            //setCameraFov(param.fov);
        }
        
        function animation() {   //  渲染函数
          stats.begin();   // 检测器：监测执行一次需要的相关数据

          changeFov();  // 改变视角：视角越大，物体越小
          renderer.render(scene, camera);    // 通过场景sence和相机crame一起，用 渲染器 渲染出来
          requestAnimationFrame(animation);  // 当render函数空闲时，不断地调用该函数进行渲染，（可实现渲染效果）


          stats.end();
        }
 
        function threeStart(){
          initScene();   // 场景
          initCamera();  // 相机
          initRender();  // 渲染器
          initObject();  // 几何体
          initLight(); // 光
          animation();  // 渲染函数 
          initTween();  // 动画：移动相机位置


          createUI();  // 创建UI界面
        }
    }
 
    /**
     * 开始Three
     *
     * @memberof ThreeBim
     */
    componentDidMount(){
        this.initThree();
    }
    render() {
        return (
          <div id='canvas-frame'></div>
        );
    }
}
 
export default Three2;